<script setup lang="ts">
import { getCurrentInstance, ref, reactive, onBeforeMount } from 'vue'
import { onBeforeRouteLeave } from 'vue-router'
const { proxy } = getCurrentInstance()

/* ---- */
const userInfo = proxy.$Store.get('userInfo') || {}
const logUser = proxy.$Store.get('logUser') || {}
const WXConfig = proxy.$Store.get('WXConfig') || {}

/* --设置微信分享功能-- */
proxy.$WxTool.loadJsdk(WXConfig, (obj) => {
  if (!obj) return
  // ----
  obj.hideMenuItem()
})

/* ---- */
const types = [{
  value: '1',
  text: 'φ0.8'
}, {
  value: '2',
  text: 'φ1.0'
}, {
  value: '3',
  text: 'φ1.2'
}, {
  value: '4',
  text: 'φ1.6'
}, {
  value: '5',
  text: 'φ2.0'
}, {
  value: '6',
  text: 'φ2.4'
}, {
  value: '7',
  text: 'φ2.5'
}, {
  value: '8',
  text: 'φ3.0'
}, {
  value: '9',
  text: 'φ3.2'
}, {
  value: '10',
  text: 'φ4.0'
}, {
  value: '11',
  text: 'φ5.0'
}]
const pdt = reactive({
  name: ''
})
// ----
const form = reactive({
  type: '',
  sn: '',
  date: ''
})

/* ---- */
const pickerType = ref()
const pickerDate = ref()
const layer = ref()
const layerLoading = ref()

/* ---- */
const getCurrencyInfo = () => {
  if (proxy.$route.query.goods_id) {
    proxy.$http.get('proc/index', {
      params: { 'ProductSearch[id]': proxy.$route.query.goods_id }
    }).then((res) => {
      const GData = res.items[0] || {}
      pdt.name = proxy.$Myfun.setText(GData.name)
    }).catch((err) => { proxy.$Myfun.forToast(layer.value, 'open', err) })
  }
}
// ----
const emptyInfo = (event) => {
  const curEL = event.currentTarget
  const input = curEL.parentElement.querySelector('input')
  input.value = ''
  input.dispatchEvent(new Event('input'))
}
// ----
const getAuditFun = (type, item) => {
  switch (Number(type)) {
    case 1: {
      const options = {
        type: 1,
        isFirst: true,
        button: ['取消', '确定'],
        initData: types,
        yes: (result) => {
          form.type = result[0].text
        }
      }
      proxy.$Myfun.isIndepth(pickerType.value, 'open', options)
      break
    }
    case 2: {
      const options = {
        opts: { beginYear: 1940, endYear: 2600, date: form.date },
        button: ['取消', '确定'],
        yes: (result) => {
          let resText = ''
          result.forEach((curItem, index) => {
            resText += (index > 0 ? '-' : '') + curItem.text
          })
          form.date = resText
        }
      }
      proxy.$Myfun.isIndepth(pickerDate.value, 'open', options)
      break
    }
  }
}
const subform = async () => {
  if (Number(form.type.length) === 0) {
    proxy.$Myfun.forToast(layer.value, 'open', '请选择规格！')
    return false
  }
  if (Number(form.sn.length) === 0) {
    proxy.$Myfun.forToast(layer.value, 'open', '请填写批号！')
    return false
  }
  if (Number(form.date.length) === 0) {
    proxy.$Myfun.forToast(layer.value, 'open', '请选择日期！')
    return false
  }
  // ----
  let isNewMaterial = true
  let oldMaterialId = 0
  await proxy.$http.get('material-has-dealer/index', {
    params: {
      'MaterialHasDealerSearch[type]': form.type,
      'MaterialHasDealerSearch[has_sn]': form.sn,
      'MaterialHasDealerSearch[date]': form.date,
      // ----
      'MaterialHasDealerSearch[has_dealer_id]': logUser.id,
      'MaterialHasDealerSearch[has_product_id]': proxy.$route.query.goods_id,
      'MaterialHasDealerSearch[book_id]': proxy.$route.query.id
    }
  }).then((res) => {
    if (Number(res.items.length) > 0) {
      isNewMaterial = false
      oldMaterialId = res.items[0].id
    }
  }).catch((err) => { proxy.$Myfun.forToast(layer.value, 'open', err) })
  // ----
  if (!isNewMaterial) {
    proxy.$Myfun.forToast(layer.value, 'open', '该产品已有此规格、批号和日期的材质书！进入预览材质书！！', () => {
      proxy.$Myfun.openPage(proxy, 'replace', 'MaterialDown', { id: oldMaterialId, dealer_id: proxy.$route.query.dealer_id })
    })
    return false
  }
  // ----
  const forType = 'post'
  const forUrl = 'material-has-dealer/create'
  const forData = {
    has_dealer_id: logUser.id,
    has_product_id: proxy.$route.query.goods_id,
    book_id: proxy.$route.query.id,
    // ----
    type: form.type,
    has_sn: form.sn,
    date: form.date,
    // ----
    config_id: userInfo.config_id,
    openid: userInfo.openid
  }
  // ----
  proxy.$Myfun.onLoading(layerLoading.value, 'open', proxy.$Global.loadingMsg)
  let resData = ''
  await proxy.$http[forType](forUrl, forData).then((res) => { resData = res }).catch((err) => { proxy.$Myfun.forToast(layer.value, 'open', err) })
  // ----
  proxy.$Myfun.disLoading(layerLoading.value, 'close')
  if (resData) proxy.$Myfun.openPage(proxy, 'replace', 'MaterialDown', { id: resData.id, dealer_id: proxy.$route.query.dealer_id })
}
const goback = () => { proxy.$router.back() }

/* ---- */
onBeforeMount(() => {
  getCurrencyInfo()
})
onBeforeRouteLeave(() => { proxy.$Myfun.setScrollTop(proxy.$refs.formSection) })
</script>

<template>
  <div class="mescroll-touch" ref="formSection">
    <div class="formSet">
      <ul>
        <li>
          <div class="mate-goods xw-flex">
            <span class="xw-color-13">产品名称：</span>
            <div class="xw-flex-W1">{{pdt.name}}</div>
          </div>
        </li>
        <li>
          <div class="form-txt xw-radius-3 xw-flex xw-flex-align">
            <i>规格</i>
            <p class="xw-flex-W1"><input class="text" type="text" placeholder="请选择规格" v-model.trim="form.type" @click="getAuditFun(1)" readonly unselectable="on" onfocus="this.blur()"/></p>
            <span class="fa fa-caret-down xw-color-16"></span>
            <transition name="fade"><em class="fa fa-times-circle" @click="emptyInfo" v-if="form.type"></em></transition>
          </div>
        </li>
        <li>
          <div class="form-txt xw-radius-3 xw-flex xw-flex-align">
            <i>批号</i>
            <p class="xw-flex-W1"><input class="text" type="text" placeholder="" v-model.trim="form.sn"/></p>
            <transition name="fade"><em class="fa fa-times-circle" @click="emptyInfo" v-if="form.sn"></em></transition>
          </div>
        </li>
        <li>
          <div class="form-txt xw-radius-3 xw-flex xw-flex-align">
            <i>日期</i>
            <p class="xw-flex-W1"><input class="text" type="text" placeholder="" v-model.trim="form.date" @click="getAuditFun(2)" readonly unselectable="on" onfocus="this.blur()"/></p>
            <span class="fa fa-caret-down xw-color-16"></span>
            <transition name="fade"><em class="fa fa-times-circle" @click="emptyInfo" v-if="form.date"></em></transition>
          </div>
        </li>
      </ul>
      <div class="form-sub xw-radius-3 xw-bgCL-11 xw-act" @click="subform">确定提交</div>
      <div class="form-sub xw-radius-3 xw-WhiteRed xw-act" @click="goback">取消返回</div>
    </div>
    <picker-view ref="pickerType"/>
    <pickerdate-view ref="pickerDate"/>
    <layer-view ref="layer"/>
    <layer-view ref="layerLoading"/>
  </div>
</template>

<style scoped>
/* ---- */
.mate-goods { padding: 0.5rem 0; line-height: 2.5rem; font-size: 1.7rem; }
</style>